<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" v-model='message' />
			<p>{{message}}</p>
			<h2>子组件</h2>
			<custom v-model="message" ></custom>
			<!--v-model就是下面写发的语法糖-->
			<custom :value="message" @input="value=>message=value"></custom>
		</div>
		<script>
			/*
				在组件上使用v-model
				在子组件中使用value来接收v-model的值

				value
				oninput

			*/
			Vue.component('custom', {
				props:{
					value:{
						type: String
					}
				},
				template: `<div>
					<h2>{{value}}</h2>
					<button @click="changeTitle">改变</button>
				</div>`,
				methods: {
					changeTitle(){
						this.$emit('input','子组件改了')
					}
				}
			});

			new Vue({
				el: '#app',
				data:{
					message: '父级的数据'
				}
			})

		</script>
	</body>
</html>